//读取文件
let reader = new FileReader();

onload = function(){
    daohanglan();
    let chk = document.querySelectorAll("input[name='sex']");
    chk.forEach(c=>{
        c.addEventListener("change",ChangeRadio);
    })

    let file = document.querySelector("input[name='myfile']");
    file.addEventListener("change",function (){
    //    获取当前选中的文件信息
        let one = event.target.files[0];
        reader.readAsDataURL(one);
        Close();
    })

//    将读取文件以base64编码方式进行返回结果集
    reader.onload=function (){
        document.querySelector("#pictuer").src=reader.result;

    }

//   给表单绑定submit事件
//    也可以给表单添加普通按钮
    let  fome = document.querySelector("#myform");

    fome.addEventListener("submit",function (){
        let formData = new FormData(document.querySelector("#myform"));
    //    阻止表单提交
        event.preventDefault();
        $.ajax({
            url:"/PersonalInformation",
            type:"post",
            data:formData,
            //processData表示ajax提交的时候是否会对data参数进行序列化。false表示不会
            processData: false,
            /*
            * 默认编码方式application/x-www-form-urlencoded
            * 文件上传设置的编码方式multipart/form-data
            * contentType设置成false，表示ajax上传的时候不会对编码进行修改
            * */
            contentType:false,
            success:function(resp){
                console.log("返回的数据是：",resp);
                // document.querySelector("#pictuer").src=resp.src;
                $("#pictuer").attr("src",resp.src);
              let ShowMe = document.querySelector("#ShowMe");
              ShowMe.style.display="block";
            }
        })

    })


    document.querySelector("#search").addEventListener("keydown",keyboard)
    document.querySelector("#search").addEventListener("input",searchtips)
    document.querySelector(".searchtip").addEventListener("mouseleave",function (){
        document.querySelector(".searchtip").style.display="none"
    })

    document.querySelectorAll(".xlli").forEach(x=>{
        x.addEventListener("mouseover",xllijdbc);
    })
    a =document.querySelector(".showNavtwoson").innerHTML;
    document.querySelector(".newtuijian").addEventListener("mouseover",function (){
        document.querySelector(".showNavtwoson").innerHTML=a;
    })
    document.querySelectorAll(".gnb_nav_center").forEach(x=>{
        x.addEventListener("mouseover",function (){
            document.querySelector(".showNavtwoson").innerHTML=a;
        })
    })

    document.querySelectorAll(".xlli").forEach(x=>{
        x.addEventListener("click",function (){
            let xid = parseInt(event.target.getAttribute("id"));
            location.href="/goodsList?xid="+xid+"&show="+1;
        })
    })
}


function keyboard(){
    let keycode = event.keyCode;
    if (keycode == 13){
        search();
    }
}

function search(){
    let searchvalue = document.querySelector("#search").value;
    if(searchvalue==""){
        event.preventDefault();
    }else {
        location.href="/index?v=search&searchvalue="+searchvalue;
    }

}

function searchtips(){
    if (document.querySelector("#search").value==""){
        document.querySelector(".searchtip").style.display="none"
    }else {
        document.querySelector(".searchtip").style.display="block"
    }
    let searchvalue = document.querySelector("#search").value;
    $.ajax({
        url:"/index?v=searchtip",
        type:"post",
        data:{
            searchvalue
        },
        dataType:"json",
        success:(resp=>{
            if (resp.length>4){
                document.querySelector(".searchtip").style.height="80px";
                document.querySelector(".searchtip").style.overflowY="scroll";
            }else if (resp.length==0){
                document.querySelector(".searchtip").style.height="20px";
                document.querySelector(".searchtip").style.overflowY="";
            }else if(resp.length<4){
                document.querySelector(".searchtip").style.height="auto";
                document.querySelector(".searchtip").style.overflowY="";
            }
            let tipsbox = document.querySelector(".searchtip");
            let html=``;
            resp.forEach(r=>{
                html+=`<div onclick="bindfuture()">`+r.sname+`</div>`
            })
            tipsbox.innerHTML=html;
        })
    })
}

function bindfuture(){
    let divname = event.currentTarget.innerText;
    location.href="/index?v=search&searchvalue="+divname;
}


function xllijdbc(){
    let xid = parseInt(event.currentTarget.getAttribute("id"));
    $.ajax({
        url:"/index?v=searchli",
        type:"post",
        data:{
            xid
        },
        success:((resp)=>{
            let r = JSON.parse(resp);
            let showNavtwoson = document.querySelector(".showNavtwoson");
            let html = ``;
            r.forEach(y=>{
                html+=`<li onclick="chuandetail(${y.sid},${y.lid})">`+y.sname+`</li>`
            })
            showNavtwoson.innerHTML=html;
        })
    })
}

function chuandetail(params1,params2){
    location.href="/productDetails?sid="+params1+"&lid="+params2;
}



let ChangeRadio = function (){
    let chk = document.querySelectorAll("input[name='sex']");
    chk.forEach(c=>{
        if (c.change){
            let chk = c.value;
            chk.value = chk;
        }
    })
}

function Login(){
    let login = document.querySelector("#Login");
    let levitation = document.querySelector("#levitation");

    login.onmouseenter = function (){
        levitation.style.display = "block";
    }
    levitation.onmouseleave = function (){
        levitation.style.display = "none";
    }
}
function isnull(){
    location.href="/login"
}
function iscart(){
    location.href="/goods"
}
function Account(){
    $.ajax({
        url:"/PersonalInformation",
        type:"get",
        data:{

        },
        complete:function (){
            location.href="/AccountSettings"
        }
    })
}

function ShowOpen(){
    let box = document.querySelector(".bcakg");
    box.style.display="block";
}
function ShowClose(){
    let box = document.querySelector(".bcakg");
    box.style.display="none";
}
function Open(){
    let show = document.querySelector(".show");
    show.style.display="block";
}
function Close(){
    let show = document.querySelector(".show");
    show.style.display="none";

}
function ShowMe(){
    let ShowMe = document.querySelector("#ShowMe");
    ShowMe.style.display="none";
}

function ok(){
    var userupdatename = document.querySelector(".userupdatename").value;
    var usname = document.querySelector("#usname");
    usname.value=userupdatename;
    ShowClose();
}

function daohanglan() {
    let allLi = document.querySelectorAll(".gnb_nav_center li");
    let show = document.querySelector("#show");
    let zzc = document.querySelector("#zzc");
    let img = document.querySelectorAll(".showNavone li span img");
    let showli = document.querySelectorAll(".showNavone li");
    let showNavtwoson = document.querySelector(".showNavtwoson");
    allLi.forEach(x => {
        x.addEventListener("mouseover", function() {
            document.querySelector("#show").style.height = 680 + "px";
            zzc.style.display = "block";

            showli.forEach(x => {
                x.style.fontWeight = "";
            })

            for (var i = 0; i < img.length; i++) {
                if (i == 0) {
                    img[i].style.display = "block";
                    document.querySelector(".showNavone li").style
                        .fontWeight = "bold";
                } else {
                    img[i].style.display = "none";
                }
            }
            allLi.forEach(y => {
                y.style.background = "#fff";
                y.style.color = "#000";
            })
            event.target.style.background = "#000";
            event.target.style.color = "#ffff";

            showNavtwoson.style.display = "block";
        })

    })
    document.querySelector(".gnb_nav").onmouseleave = function() {
        show.style.height = 0 + "px";
        zzc.style.display = "none";
        allLi.forEach(y => {
            y.style.background = "#fff";
            y.style.color = "#000";
        })
    }

    let cancel = document.querySelector("#cancelshow");
    cancel.addEventListener("click", function() {
        show.style.height = 0 + "px";
    })

    showli.forEach(x => {
        x.addEventListener("mouseover", function() {
            img.forEach(x => {
                x.style.display = "none";
            })
            let hhh = event.currentTarget.querySelector("span img");
            hhh.style.display = "block";
            showli.forEach(y => {
                y.style.fontWeight = "";
            })
            event.currentTarget.style.fontWeight = "bold";

            showNavtwoson.style.display = "none";
            setTimeout(() => {
                showNavtwoson.style.display = "block"
            }, 150);
        })
    })
}